<template>
  <div class="pageDetail">
    <el-form
      ref="formRef"
      class="form_item_w2"
      :model="pageForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="pageForm.courseName" placeholder="请输入课程名称" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="所属学院" prop="collageId">
        <TheDeptSelect v-model="pageForm.collageId" :modelValue="pageForm.collageId" :deptType="39" placeholder="请选择所属学院"  :disabled="disabled" @update:modelValue="pageForm.collageId = $event"/>
      </el-form-item>
      <el-form-item label="授课教师" prop="teacherName">
        <el-input v-model="pageForm.teacherName" placeholder="请输入授课教师" disabled></el-input>
      </el-form-item>
      <el-form-item label="授课专业" prop="majorId">
        <TheDeptSelect v-model="pageForm.majorId" :modelValue="pageForm.majorId" :deptType="40" placeholder="请选择所属专业"  :disabled="disabled" @update:modelValue="pageForm.majorId = $event"/>
      </el-form-item>
      <el-form-item label="授课班级" prop="clazzId">
        <TheDeptSelect v-model="pageForm.clazzId" :modelValue="pageForm.clazzId" :deptType="41" placeholder="请选择所属班级"  :disabled="disabled" @update:modelValue="pageForm.clazzId = $event"/>
      </el-form-item>
      <el-form-item label="教学类型" prop="teachTypeId">
        <el-select v-model="pageForm.teachTypeId" placeholder="请输入课程类型" :disabled="disabled" >
          <el-option 
            v-for="(dictItem,index) in teachTypeDicts" 
            :label="dictItem.dictLabel" 
            :value="dictItem.dictCode"
            :key="index" 
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程学时" prop="courseHour">
        <el-input-number v-model="pageForm.courseHour" :min="0" label="请输入课程学时" :disabled="disabled"></el-input-number>
      </el-form-item>
      <el-form-item label="教学目标" prop="teachTarget">
        <el-input v-model="pageForm.teachTarget" placeholder="请输入教学目标" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="课程重点" prop="courseEmphasis">
        <el-input v-model="pageForm.courseEmphasis" placeholder="请输入课程重点" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="课程难点" prop="courseDifficulty">
        <el-input v-model="pageForm.courseDifficulty" placeholder="请输入课程难点" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="授课时间" prop="teachTime">
        <el-date-picker
          v-model="pageForm.teachTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          :disabled="disabled">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="课程成果" prop="teachAchievement">
        <el-input v-model="pageForm.teachAchievement" placeholder="请输入课程成果" :disabled="disabled"></el-input>
      </el-form-item>
    </el-form>
    <div class="pageFooterBtn">
      <el-button @click="$router.back()">返回</el-button>
      <el-button type="primary" @click="handleSubmit()" v-if="['add','edit'].includes(action)" :loading="loading">提交</el-button>
    </div>
  </div>
</template>
<script>
import { rules } from './data'
import { useDict } from '@/utils/dict/useDict'
import { teachingReflectionAddApi, teachingReflectionEditApi, teachingReflectionByIdApi } from '@/api/teachingIdea/teachingReflection'
import { getInfo } from '@/api/login'
import TheDeptSelect from '@/componentsView/TheDeptSelect.vue';
export default {
  name: 'teachingReflectionDetail',
  components: { TheDeptSelect },
  data() {
    return {
      rules,
      pageForm: {
        majorId:null,
        clazzId:null,
        collageId:null,
      },
      loading:false,
      disabled:false,
      teachTypeDicts: useDict('teach_type'),
      id: this.$route.query.reflectionId,
      action: this.$route.query.action
    }
  },

  async created() {
    this.getUserInfo();
    if (this.id) this.getById()
  },
  methods: {
    getUserInfo(){
      getInfo().then(res => {
        this.pageForm = Object.assign({}, this.pageForm, {
          teacherId: res.user.userId,
          teacherName: res.user.userName
        })
      })
    },
    async getDeptTree() {
      try {
        const response = await deptTreeSelect()
        this.deptOptions = response.data
      } catch (error) {
        this.$message.error('获取部门数据失败')
      }
    },
    
    async handleSubmit() {
      const pureNumberRegex = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
      if (pureNumberRegex.test(this.pageForm.courseName)) {
        this.$message.error('课程名称不能为纯数字')
        return
      }
      try {
        await this.$refs.formRef.validate()
        this.loading = true
        let res = {}
        if (this.id) {
          delete this.pageForm.fileInfo
          res = await teachingReflectionEditApi(this.pageForm)
        }else{
          res = await teachingReflectionAddApi(this.pageForm)
        }
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.$router.back()
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      } catch (error) {
        if (error !== 'validate') {
          this.$message.error(msg)
        }
      } finally {
        this.loading = false
      }
    },

    async getById(){
      if (this.action === 'look') this.disabled = true
      teachingReflectionByIdApi(this.id).then(res => {
        if (res.code === 200) {
          this.pageForm = res.data || {}
        } else {
          this.$message.error(res.msg)
        }
      })
    }
    
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-select {
	width: 100% !important;
}
::v-deep .el-date-editor{
  width: 100% !important;
}
::v-deep .el-input-number{
  width: 100% !important;
}
</style>